<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公告详情</title>

    <link rel="stylesheet" href="./js/lib/bootstrap-4.6.2/css/bootstrap.min.css">

    <link rel="stylesheet" href="./styles/base.css">
    <link rel="stylesheet" href="./styles/common.css">
    <link rel="stylesheet" href="./styles/announcement-details.css">

    <script src="./js/lib/jquery-3.7.1.min.js"></script>
    <script src="./js/lib/bootstrap-4.6.2/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="home-container">
        <!-- 头部 -->
        <!-- 导航头 -->
        <div class="wrap-bar">
            <!-- 内容版心区域 -->
            <div class="layout-1226 welcome-wrap">
                <!-- 欢迎语 -->
                <div class="welcome-word">
                    你好，欢迎来到辉光网络
                </div>
                <!-- 右侧用户 -->
                <div class="bar-user">
                    <a href="">登录</a>
                    <a href="">注册</a>
                    <a href="">个人中心</a>
                </div>
            </div>
        </div>

        <!-- 固定菜单 -->
        <div class="home-tool-bar">
            <div class="top-title">快捷导航</div>
            <div class="tool-list">
                <a href="javaScript:;" class="item">
                    <img src="/images/kjdh_01.png" class="static">
                    <span class="tool-title">购物车</span>
                </a>
                <a href="javaScript:;" class="item">
                    <img src="/images/kjdh_02.png" class="static">
                    <span class="tool-title">我要出售</span>
                </a>
                <a href="javaScript:;" class="item">
                    <img src="/images/kjdh_03.png" class="static">
                    <span class="tool-title">投诉售后</span>
                </a>
                <a href="javaScript:;" class="item">
                    <img src="/images/kjdh_04.png" class="static">
                    <span class="tool-title">帮助中心</span>
                </a>
                <a href="javaScript:;" class="item">
                    <img src="/images/kjdh_05.png" class="static">
                    <span class="tool-title">微信咨询</span>
                </a>
                <a href="javaScript:;" class="item">
                    <img src="/images/kjdh_06.png" class="static">
                    <span class="tool-title">在线咨询</span>
                </a>
                <a href="javaScript:;" class="item">
                    <img src="/images/kjdh_07.png" class="static">
                    <span class="tool-title">商务合作</span>
                </a>
            </div>
        </div>
        <div class="layout-1226">
            <div class="wrap-header">
                <!-- logo -->
                <a href="javaScript:;">
                    <img src="/images/logo-hg.jpg" alt="huiguang">
                </a>
                <!-- 搜索框 -->
                <div class="wrap-select">
                    <div class="input-group">
                        <select class="form-control">
                            <option selected>王者荣耀</option>
                            <option value="1">逆水寒</option>
                            <option value="2">绝地求生</option>
                            <option value="3">我的世界</option>
                        </select>
                        <input type="text" class="form-control" placeholder="请搜索你喜欢的游戏..." />
                        <div class="input-group-append">
                            <button type="button" class="btn btn-primary">搜索</button>
                        </div>
                    </div>
                    <div class="hot-game d-flex">
                        <span>热门游戏：</span>
                        <ul class="d-flex">
                            <li>穿越火线</li>
                            <li>枪战王者</li>
                            <li>王者荣耀</li>
                            <li>地下城与勇士</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 导航栏 -->
            <div class="nav-wrap">
                <ul>
                    <li>
                        <a href="javaScript:;">
                            <span>首页</span>
                        </a>
                    </li>
                    <li>
                        <a href="javaScript:;">
                            <span>我要买号</span>
                        </a>
                    </li>
                    <li>
                        <a href="javaScript:;">
                            <span>我要卖号</span>
                        </a>
                    </li>
                    <li>
                        <a href="javaScript:;">
                            <span>个人中心</span>
                        </a>
                    </li>
                    <li>
                        <a href="javaScript:;">
                            <span>联系我们</span>
                        </a>
                    </li>
                    <li class="active">
                        <a href="javaScript:;">
                            <span>帮助中心</span>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 内容主体 -->
            <div class="nav-link">
                <span>您的位置：</span>
                <span><a href="#">首页 > </a></span>
                <span><a href="#" class="current">帮助中心</a></span>
            </div>
            <div class="main-content">
                <div class="left-panel">
                    <div class="accordion" id="accordionExample">
                        <div class="card">
                            <div class="card-header" id="headingOne">
                                <span data-toggle="collapse" data-target="#collapseOne" aria-expanded="false"
                                    aria-controls="collapseOne">
                                    我的账户
                                </span>
                            </div>
                            <div id="collapseOne" class="collapse" aria-labelledby="headingOne"
                                data-parent="#accordionExample">
                                <ul class="nav-list">
                                    <li>个人资料</li>
                                    <li>修改密码</li>
                                    <li>换绑手机</li>
                                    <li>实名认证</li>
                                    <li>我的收藏</li>
                                </ul>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingTwo">
                                <span data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false"
                                    aria-controls="collapseTwo">
                                    联系我们
                                </span>
                            </div>
                            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                                data-parent="#accordionExample">
                                <ul class="nav-list">
                                    <li>在线客服</li>
                                    <li>投诉售后</li>
                                    <li>商务合作</li>
                                </ul>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingThree">
                                <span data-toggle="collapse" data-target="#collapseThree" aria-expanded="true"
                                    aria-controls="collapseThree">
                                    帮助中心
                                </span>
                            </div>
                            <div id="collapseThree" class="collapse show" aria-labelledby="headingThree"
                                data-parent="#accordionExample">
                                <ul class="nav-list">
                                    <li class="current">公告列表</li>
                                    <li>隐私政策</li>
                                    <li>账号交易业务</li>
                                    <li>企业介绍</li>
                                    <li>黑号查询</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right-panel">
                    <div class="header">
                        <img src="./images/userinfo_me.png" alt="">
                        <span class="nav-title">公告详情</span>
                    </div>
                    <div class="content">
                        <!-- 个人资料 -->
                        <div class="nav-content">
                            个人资料
                        </div>
                        <!-- 修改密码 -->
                        <div class="nav-content">
                            修改密码
                        </div>
                        <!-- 换绑手机 -->
                        <div class="nav-content">
                            换绑手机
                        </div>
                        <!-- 实名认证 -->
                        <div class="nav-content">
                            实名认证
                        </div>
                        <!-- 我的收藏 -->
                        <div class="nav-content">
                            我的收藏
                        </div>
                        <!-- 在线客服 -->
                        <div class="nav-content">
                            在线客服
                        </div>
                        <!-- 投诉售后 -->
                        <div class="nav-content">
                            投诉售后
                        </div>
                        <!-- 商务合作 -->
                        <div class="nav-content">
                            商务合作
                        </div>
                        <!-- 公告列表 -->
                        <div class="nav-content" style="display: block">
                            <div class="ggxq">
                                <a href="" class="back-list">&lt;&lt; 返回公告列表</a>
                                <div class="ggxq-content">
                                    <div class="ggxq-title">关于未成年防沉迷系统公告</div>
                                    <div class="ggxq-info">
                                        <div class="author">作者:
                                            <span>系统管理员</span>
                                        </div>
                                        <div class="time ml-5">发布时间:
                                            <span>2023-11-1812:34.43</span>
                                        </div>
                                    </div>
                                    <div class="ggxq-desc">
                                        <p>
                                            尊敬的用户，您好!
                                        </p>
                                        <p>
                                            根据国家对未成年人保护的相关法律法规规定，及国家对网络游戏进行管理的相关要求，为了确保用户身份信息的真实及持续有效，本平台将积极响应国家号召，加入未成年实名系统。
                                        </p>
                                        <p>
                                            本平台将在2021年7月17日开始，在不同场景中要求您进行未成年实名，防止未成年人沉迷游戏，平衡游戏与生活，合理安排时间!现诚挚地邀请您积极落实游戏防沉迷的未成年实名工作。
                                        </p>
                                        <p>
                                            现对未成年实名作如下说明:
                                        </p>
                                        <p>
                                            1、本平台禁止未成年人进行游戏帐号交易。一旦发现您冒用成年人进行注册交易的，本平台将立即冻结您的账号，并有权取消您的交易。
                                        </p>
                                        <p>
                                            2、在以下两种交易场景下,需要您进行本平台的未成年实名:
                                        </p>
                                        <p>
                                            当您作为<span>买家</span>，在本平台进行账号交易时，支付您的号款时，我们需要核实您的个人信息
                                        </p>
                                        <p> 当您作为<span>商家</span>，在本平台发布您的账号详情时，我们需要收取您的个人信息资料以及保证金。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 隐私政策 -->
                        <div class="nav-content">
                            隐私政策
                        </div>
                        <!-- 账号交易业务 -->
                        <div class="nav-content">
                            账号交易业务
                        </div>
                        <!-- 企业介绍 -->
                        <div class="nav-content">
                            企业介绍
                        </div>
                        <!-- 黑号查询 -->
                        <div class="nav-content">
                            黑号查询
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部 -->
            <div class="site-footer">
                <div class="layout-1226">
                    <div class="footer-service">
                        <ul>
                            <li>
                                <img src="./images/aq.png" alt="">
                                <div class="right">
                                    <h3>诚信安全</h3>
                                    <span>权威认证,安全便捷</span>
                                </div>
                            </li>
                            <li>
                                <img src="./images/hs1.png" alt="">
                                <div class="right">
                                    <h3>急速回收</h3>
                                    <span>不玩回收,玩腻换号</span>
                                </div>
                            </li>
                            <li>
                                <img src="./images/kf_01.png" alt="">
                                <div class="right">
                                    <h3>专属客服</h3>
                                    <span>1对1客服,优质服务</span>
                                </div>
                            </li>
                            <li>
                                <img src="./images/game.png" alt="">
                                <div class="right">
                                    <h3>精品账号</h3>
                                    <span>各种账号,应有尽有</span>
                                </div>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>

        <!-- 底部声明 -->
        <div class="site-info">
            <div class="layout-1226">
                <!-- 声明文字 -->
                <div>
                    <p>
                        <a href="javaScript:;">关于我们</a>
                        <span>|</span>
                        <a href="javaScript:;">联系我们</a>
                        <span>|</span>
                        <a href="javaScript:;">隐私政策</a>
                        <span>|</span>
                        <a href="javaScript:;">政务协议</a>
                        <span>|</span>
                        <a href="javaScript:;">帮助中心</a>
                    </p>
                    <p>
                        <a href="javaScript:;">备案号：xxxxxxxxxx</a>
                        <a href="javaScript:;">公司名称：江苏辉光网络科技有限公司</a>
                        <a href="javaScript:;">© 版权所有</a>
                    </p>
                </div>
            </div>
        </div>

    </div>
</body>

<script>
    // 个人中心内容切换
    var navListLis = document.querySelectorAll(".nav-list li");
    console.log(navListLis);
    var tabItems = document.querySelectorAll(".nav-content");
    var tabTitle = document.querySelector(".nav-title");
    // 注册事件
    for (let i = 0; i < navListLis.length; i++) {
        // 给每个li添加个data-index属性，为了对应上各自的内容
        navListLis[i].setAttribute("data-index", i);
        navListLis[i].onclick = function (e) {
            // 去掉其他li的current类名
            for (let i = 0; i < navListLis.length; i++) {
                navListLis[i].className = "";
            }
            // 设置自己的的current类名
            this.className = "current";
            // 获取当前模块li的data-index值
            var index = this.getAttribute("data-index");
            console.log(index);
            // 去掉其他模块内容的显示
            for (let i = 0; i < tabItems.length; i++) {
                tabItems[i].style.display = "";
            }
            tabTitle.innerHTML = e.target.innerHTML
            // 让自己的显示
            tabItems[index].style.display = "block";
        };
    }

    // 头像上传
    function preview(obj) {
        // 浏览器兼容性处理
        var file = obj.files[0];
        if (window.FileReader) {
            var reader = new FileReader();
            reader.readAsDataURL(file);
            // 监听文件读取结束后事件
            reader.onloadend = function (e) {
                document.getElementById("avatar").src = e.target.result;
            };
        }
    }

    // 表单校验
    // 获取我们想要应用自定义Bootstrap验证样式的所有表单
    var forms = document.getElementsByClassName('needs-validation');
    // 循环它们并防止提交
    var validation = Array.prototype.filter.call(forms, function (form) {
        form.addEventListener('submit', function (event) {
            if (form.checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
            }
            form.classList.add('was-validated');
        }, false);
    });
</script>

</html>